<template>
  <div class="show-data-list">
    <el-form :model="form" label-width="100px">
      <el-form-item label="数据集名称">
        <el-input
          :disabled="readOnly"
          v-model="form.fileName"
          placeholder="数据集名称"
          size="small"
        />
      </el-form-item>
      <el-form-item label="数据集描述">
        <el-input
          :disabled="readOnly"
          v-model="form.fileDesc"
          placeholder="数据集描述"
          size="small"
        />
      </el-form-item>
      <el-form-item label="数据文件">
        <el-card class="box-card file">
          <i class="el-icon-document"></i>
          <div>{{ form.fileDesc }}</div>
          <div>{{ form.fileSize }}KB</div>
        </el-card>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-button @click="setReturn">重新选择</el-button>
        <el-button type="primary" @click="callBack">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'showDataList',
  props: {
    form: [Object],
    callBack: [Object, Function],
    setHasSelectFile: [Function],
  },
  methods: {
    setReturn() {
      this.setHasSelectFile();
    },
  },
  computed: {
    readOnly: function () {
      let result = false;
      // if(this.form.fileId){
      result = true;
      // }
      return result;
    },
  },
};
</script>
<style lang="less" scoped>
@import '~@/style/variables.less';

.file {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  i {
    color: @--color-primary;
    font-size: 50px;
  }
  div {
    font-size: 14px;
    line-height: 18px;
    color: #000;
  }
}
</style>
